<template>
    <div class="apply">
        <div class="fill-in">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="1.5rem" :show-message="false"
                     :label-position="'top'" class="form clearfix">
                <div class="title">基本信息</div>
                <el-form-item label="姓名" prop="name">
                    <el-input placeholder="请输入姓名" v-model="ruleForm.name" @blur="$method.inputBlur()"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="cardId">
                    <el-input placeholder="请输入身份证号" v-model="ruleForm.cardId" @blur="$method.inputBlur()">
                    </el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone" class="is-required">
                    <el-input placeholder="请输入手机号码" v-model="ruleForm.phone" type="number"
                              @blur="$method.inputBlur()"></el-input>
                </el-form-item>
                <div class="title mt">网点信息</div>
                <el-form-item label="自提网点（限领7个）" prop="shop">
                    <el-input placeholder="请选择自提网点" v-model="ruleForm.shop" @focus="openShop"
                              readOnly ref="shopInput" v-if="!ruleForm.shop"></el-input>
                    <div v-if="ruleForm.shop" class="text" @click="openShop">{{ruleForm.shop}}</div>
                </el-form-item>
            </el-form>
        </div>
        <div class="submit clearfix">
            <!--            <div type="primary" @click="submitForm('ruleForm')">提交</div>-->
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </div>
        <!--        <search-box></search-box>-->
        <router-view @updateInfo="updateInfo"></router-view>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import searchBox from '../components/shop'

    export default {
        data() {
            let phoneRule = /^1[34578]\d{9}$/,
                validatePhone = (rule, value, callback) => {
                    if (!value) {
                        callback(new Error('请填写手机号'))
                    } else if (!phoneRule.test(value)) {
                        callback(new Error('手机号格式错误'))
                    } else {
                        callback()
                    }
                }
            return {
                ruleForm: {
                    name: '',
                    cardType: '1',
                    cardId: '',
                    phone: '',
                    shop: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请填写姓名', trigger: 'blur'}
                    ],
                    phone: [
                        {validator: validatePhone, trigger: 'blur'}
                    ],
                    cardId: [
                        {required: true, message: '请填写身份证号', trigger: 'blur'}
                    ],
                    shop: [
                        {required: true, message: '请选择自提网点', trigger: 'change'}
                    ]
                },
                extendForm: {
                    name: '',
                    phone: ''
                },
                extendRules: {
                    name: [
                        {required: true, message: '请填写姓名', trigger: 'blur'}
                    ],
                    phone: [
                        {validator: validatePhone, trigger: 'blur'}
                    ]
                },
                shop: null, // 所选门店信息
                userData: null // 用户信息
            }
        },
        computed: {
            ...mapGetters([
                'user'
            ])
        },
        updated() {
        },
        mounted() {
            // window.location.replace(location.href)
            window.history.replaceState(null, null, location.href)
            if (this.user && this.user.phone) this.ruleForm.phone = this.user.phone
            this.getUser()
        },
        methods: {
            getUser() {
                this.$http.get('/user/data').then(result => {
                    if (result.success) {
                        this.userData = result.data[0]
                        if (result.data[0]) {
                            let obj = {
                                name: result.data[0].name,
                                cardId: result.data[0].card,
                                phone: result.data[0].phone
                            }
                            this.ruleForm = {...this.ruleForm, ...obj}
                        }
                    }
                })
            },
            updateInfo(name, info) {
                this[name] = info
                this.ruleForm.shop = info.name
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid, obj) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        this.$vux.toast.text(obj[Object.keys(obj)[0]][0].message, 'middle')
                        return false
                    }
                })
            },
            submitForm(formName) {
                this.validate('ruleForm', () => {
                    this.submit()
                })
            },
            submit() {
                let _this = this,
                    params = {
                        cardid: this.ruleForm.cardId.trim(), // 证件号
                        // cardType: this.ruleForm.cardType, // 证件类型
                        name: this.ruleForm.name.trim(), // 姓名
                        phone: this.ruleForm.phone.trim(), // 手机号
                        // userId: '', // 用户id
                        orderStoreCode: this.shop.storeCode // 门店编码
                    }
                this.$http.post('/user/applyKz?noAlert=true', params).then(result => {
                    if (result.success) {
                        this.$vux.alert.show({
                            content: '预约成功',
                            onHide() {
                                _this.$router.back()
                            }
                        })
                        _this.$refs.ruleForm.resetFields()
                    } else {
                        this.$vux.alert.show({
                            content: result.message
                        })
                    }
                })
            },
            openShop() {
                let _this = this
                this.$router.push(this.$route.path + '/shop')
                if (_this.$refs.shopInput) _this.$refs.shopInput.blur()
            }
        },
        components: {
            searchBox
        }
    }
</script>

<style scoped lang="less">
    .apply {
        background-color: #f4f4f4;

        .title {
            line-height: .76rem;
            padding: 0 .4rem;
            color: #999;
            position: relative;

            &:before {
                content: '';
                position: absolute;
                top: 25%;
                left: .2rem;
                width: .04rem;
                max-width: 3px;
                height: 50%;
                background-color: #6d97ff;
            }

            &.mt {
                margin-top: -.15rem;
            }

            .rt {
                float: right;
            }

            .link {
                color: #028CFC;
            }
        }
    }

    .form {
        /deep/ .el-form-item {
            font-size: .28rem;
            /*border-bottom: 1px solid #ddd;*/
            background-color: #fff;
            margin-bottom: .15rem;
            padding: .1rem 0;

            .el-form-item__label {
                color: #333;
                padding: 0 0 0 .2rem;
                font-size: .28rem;
                line-height: .48rem;

            }

            &.custom-label {
                padding: .1rem .2rem;

                .el-form-item__label {
                    padding-left: 0;
                    width: 100%;

                    .is-required {
                        &:before {
                            content: '*';
                            color: #F56C6C;
                            margin-right: 4px;
                        }
                    }
                }
            }

            .el-form-item__content {
                position: relative;
                font-size: .28rem;
                line-height: .5rem;

                .text {
                    line-height: .38rem;
                    padding: .15rem .2rem;
                }
            }

            .el-radio-group {
                padding: 0 .2rem;
                width: 100%;

                .el-radio {
                    width: 100%;
                    font-size: .28rem;
                    line-height: .48rem;
                    white-space: normal;
                    margin-right: 0;
                    margin-bottom: .1rem;
                }
            }

            .selector {
                padding: .1rem .2rem;
                line-height: .48rem;

                .weui-select {
                    padding-left: 0;
                    height: .48rem;
                    line-height: .48rem;
                    font-size: .28rem;
                }
            }

            .weui-cells_checkbox {
                .weui-icon-checked {
                    &:before {
                        font-size: .34rem;
                    }
                }

                .weui-check:checked + .vux-checklist-icon-checked {
                    &:before {
                        color: #409EFF;
                    }
                }
            }

            .el-input {
                font-size: .28rem;

                input {
                    padding: 0 .2rem;
                    border: 0 none;
                    height: .68rem;
                    line-height: .68rem;
                    border-radius: 2px;
                    /*border-color: rgba(255, 184, 203);*/
                }

                .el-input-group__append {
                    border: 0 none;
                    background-color: transparent;
                    padding: 0 .2rem;

                    .el-button {
                        i {
                            font-size: .48rem;
                        }
                    }
                }
            }

            .el-button {
                font-size: .28rem;
            }

            .form-group {
                .weui-cells {
                    &:before, &:after {
                        border: 0 none;
                    }

                    margin-top: 0;
                    font-size: .28rem;

                    .weui-cell {
                        padding: .15rem .2rem;

                        &:before {
                            border: 0 none;
                        }
                    }

                    .vux-cell-value {
                        color: inherit;
                    }
                }
            }

            &.form-item-top {
                margin-top: -.2rem;
                border-top: 1px solid #eee;
            }

            &.is-error {
                input {
                    /*background-color: rgba(255, 184, 203, .3);*/
                    /*border: 1px solid rgba(255, 184, 203);*/
                }
            }
        }
    }

    .submit {
        height: .88rem;
        line-height: .88rem;
        z-index: 5;
        /*width: 90%;*/
        /*margin: 0 auto;*/
        margin-top: .5rem;
        display: block;

        > div, .el-button {
            text-align: center;
            border: 1px solid #409EFF;
            border-radius: .06rem;
            width: 90%;
            display: block;
            margin: 0 auto;

            &.el-button--primary {
                background-color: #409EFF;
            }
        }

    }
</style>
